<template>
    <div>

      <!--返回顶部按钮-->
      <Scrolltop></Scrolltop>

      <!--头部-->
      <div class="top">
        <div class="top-left">
          <img @click="goback()" class="top-back" src="../../../static/bmqd/BMQD-1.png" alt="">
        </div>
        <h3>{{title}}</h3>
        <div class="top-right">
          <span>神灯值</span>
          <img @click="show()" class="top-fenxiang" src="../../../static/bmqd/BMQD-3.png" alt="">
        </div>
        <div class="top-foot">
          100
          <img src="../../../static/shangcheng/shendeng.png" alt="">
        </div>
      </div>

      <div class="inp">
        <input results="s" type="search" placeholder="查找你想要的商品">
      </div>

      <div class="allType">
        <ul class="ul-list">
          <li @click="change(index)" :class="{'li':active==index}" v-for="(item,index) in arr">{{item.tit}}</li>
          <li @click="change2()" :class="{'li':bol}">眼妆 <img src="../../../static/shangcheng/shangjt.png" alt=""></li>
        </ul>
        <div v-if="bol" class="goods-type">
          <p>所有商品分类</p>
          <div class="type-list clearfix">
            <span class="span" v-for="(i,index) in arr1">{{i.type}}</span>
          </div>
        </div>
      </div>

      <!--商品描述-->
      <div class="goods-info">
        <div class="goods-list" v-for="item in info">
          <div class="info-top">
            <img :src="item.url1" alt="">
          </div>
          <div class="info-bot">
            <h3>{{item.text}}</h3>
            <span>{{item.price}}<img src="../../../static/shangcheng/shendeng.png" alt=""></span>
            <h4>￥22.30</h4>
          </div>
        </div>
      </div>



    </div>
</template>

<script>
  import Nav2 from './Nav2'
  import Scrolltop from './Scrolltop'
    export default {
        name: "Shangcheng",
      data(){
        return{
          title:'我的商城',
          active:0,
          bol:false,
          bol1:this.bol?src=require('../../../static/shangcheng/shangjiantou.png') :require('../../../static/shangcheng/xiajiantou.png'),
          arr:[
            {tit:'精选'},
            {tit:'面膜'},
            {tit:'母婴'},
            {tit:'美妆'},
          ],
          arr1:[
            {type:'防晒'},
            {type:'爽肤水×精华'},
            {type:'乳液×面霜'},
            {type:'卸妆水'},
            {type:'散粉蜜粉'},
            {type:'眼妆'},
            {type:'面膜'},
            {type:'粉饼×粉霜'},
            {type:'榜上有名'},
          ],
          info:[
            {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'500'},
            {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'500'},
            {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'500'},
            {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'500'}
          ]
        }
      },
      props:{

      },
      components:{
        Nav2,
        Scrolltop
      },
      methods:{
          goback(){
            history.go(-1);
          },
        change(i){
          this.active=i;
          this.bol=false;
        },
        change2(){
          this.active=-1;
          this.bol=true;
        }
      }
    }
</script>

<style scoped>
  .top{
    position: relative;
    width: 69rem;
    height: 14.5rem;
    line-height: 3rem;
    padding: 3.5rem 1.5rem 0;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .top-back{
    width: 3rem;
    height: 3rem;
  }
  .top-fenxiang{
    width: 4rem;
    height: 1rem;
  }
  .top-left{
    width: 16rem;
  }
  .top h3{
    font-size: 3.6rem;
    color: #fff;
    width: 16rem;
  }
  .top-right{
    width: 16rem;
  }
  .top span{
    font-size: 3rem;
    color: #fff;
    margin-right: 2rem;

  }

  .top-foot{
    width: 72rem;
    height: 6rem;
    line-height: 6rem;
    background: #e53e42;
    text-align: center;
    margin-top: 4rem;
    color: #ffd21f;
    font-size: 30px;
  }

  .inp{
    width: 68rem;
    height: 5rem;
    padding: 1.5rem 2rem;
  }
  .inp input{
    width: 64rem;
    height: 4rem;
    font-size: 24px;
    border: 1px solid #ccc;
    border-radius: 1rem;
    padding: 1rem 2rem;
  }
  input::placeholder{
    text-align: center;
    color: #e83d41;
  }


  .allType{
    position: relative;
  }

  .ul-list{
    width: 72rem;
    height: 8rem;
    display: flex;
    justify-content: space-around;
    background: #680a0c;
  }
  .ul-list li{
    width: 7rem;
    font-size: 24px;
    color: #fff;
    height: 7.7rem;
    line-height: 8rem;
    text-align: center;
  }
  .ul-list .li{
    color: #ffd21f;
    border-bottom: .3rem solid #ffd21f;
  }


  .goods-type{
    position: absolute;
    top: 8rem;
    left: 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2rem;
    background: #fff;
  }
  .goods-type p{
    width: 70rem;
    height: 6rem;
    line-height: 6rem;
    padding-left: 2rem;
    font-size: 30px;
    color: #808080;
    border-bottom: 1px solid #ccc;
  }

  .type-list{
    width: 72rem;
  }
  .type-list span{
    margin: 2rem 0 0 2rem;
    font-size: 40px;
    color: #4d4d4d;
    float: left;
  }





  .goods-info{
    width: 68rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 2rem;
  }
  .goods-list{
    width: 33rem;
    height: 44rem;
    border: 1px solid #cccccc;
    background: #fff;
    margin-bottom: 2rem;
  }
  .info-top{
    width: 7rem;
    height: 16rem;
    padding:5rem 13rem;
    border-bottom: 1px solid #cccccc;
  }
  .info-top img{
    width: 7rem;
    height: 16rem;
  }
  .info-bot{
    padding: 1rem 2rem 1rem;
    text-align: center;
  }
  .info-bot h3{
    font-size: 22px;
    color: #4d4d4d;
    margin-top: 1rem;
  }
  .info-bot span{
    display: block;
    color: #e53e42;
    font-size: 24px;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }
  .info-bot span img{
    margin-left: 1rem;
  }
  .info-bot h4 {
    text-decoration:line-through;
    font-size: 22px;
    color: #808080;
    text-align: center;
  }
</style>
